<template>
  <div class="navigation">
      <div>
        <div class="title">{{logoName}}</div>
        <p class="rout">{{routeInfo}}</p>
      </div>

      <div class="detailJusfy">
            <Upload
                :action='uploadurl'
                :on-success="onSuccess"  
                :before-upload="onPreview"
                :on-erroron-error="onError"
            >
              <span class="btn uploadlist uploadEvi">一键导入信息</span>
            </Upload>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data(){
    return {
      uploadurl:'/api2'+this.urls.importArbExcel
    }
  },
  props: {
    msg: String,
    logoName:String,
    routeInfo:String
  },
  methods:{
    onPreview(){
      this.$Spin.show({
          render: (h) => {
              return h('div', [
                  h('Icon', {
                      'class': 'demo-spin-icon-load',
                      props: {
                          type: 'ios-loading',
                          size: 60
                      }
                  }),
                  h('div', 'Loading')
              ])
          }
      });
    },
    onError(){
       this.$Spin.hide();
       this.$Message.error('上传失败');
    },
    onSuccess(res){
      if(res.code==200){
          this.$Spin.hide();
          this.$Message.success('上传成功');
          this.ivs.uploadPic=res.data[0].showAdress;
          this.srcName=res.data[0].srcName;
      }else{
          this.$Spin.hide();
          this.$Message.error('上传失败');
      }
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .navigation{
    /* margin: 16px 0; */
    margin: 0 0 8px 0;
    display: flex;
    justify-content: space-between;
  }
  .title{
    font-size: 24px;
    color: #fff;
  }
  .rout{
    color: #3b3d3f;
  }
  .detailJusfy{
    padding: 0;
  }
</style>
